import React from 'react';
import { Table, Button, Switch, Input, Typography } from 'antd';
import styles from './AccountManagement.module.css';

const { Search } = Input;
const { Text } = Typography;

const data = [
  {
    key: '1',
    id: '1',
    username: 'zhangsan01',
    realname: '张三',
    role: '管理员',
    contact: '15809590089',
    status: true,
  },
  // ... 其他数据
];

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    align: 'center',
  },
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'username',
    align: 'center',
  },
  {
    title: '真实姓名',
    dataIndex: 'realname',
    key: 'realname',
    align: 'center',
  },
  {
    title: '角色',
    dataIndex: 'role',
    key: 'role',
    align: 'center',
  },
  {
    title: '联系方式',
    dataIndex: 'contact',
    key: 'contact',
    align: 'center',
  },
  {
    title: '账号状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    render: (text, record) => (
      <Switch checked={record.status} />
    ),
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    render: () => (
      <>
        <a href="#">编辑</a> | <a href="#">查看</a> | <a href="#">删除</a> | <a href="#">重置密码</a>
      </>
    ),
  },
];

export default function AccountManagement() {
  return (
    <div className={styles.container}>
      <div className={styles.title}>
        <Text>当前位置：账号管理</Text>
      </div>
      <div className={styles.header}>
        <div>
          <Button type="primary">新增</Button>
          <Button>禁用</Button>
          <Button>启用</Button>
          <Button>删除</Button>
        </div>
        <Search 
          placeholder="请输入用户名，真实姓名" 
          style={{ width: 200 }} 
        />
      </div>
      <Table columns={columns} dataSource={data} pagination={{ pageSize: 10 }} />
    </div>
  );
}
